<template>
    <Dropdown :placement="placement" class="vm-msg-push" trigger="click"  @on-click="enterMessage">
      <Badge :count="data.length">
          <Icon type="ios-bell-outline" size="26" style="color:#fff; cursor:pointer;"></Icon>
      </Badge>
      <DropdownMenu slot="list" >
          <Dropdown-item>您有 {{ data.length }} 条信息未读!</Dropdown-item>
          <Dropdown-item divided v-for="item in data" :key="item.id">
            <img :src="item.image" height="40" alt="">
            <div class="subject">
              <span class="title">
                <span class="from">{{ item.from }}</span>
                <span class="time">{{ item.time }}</span>
              </span>
              <p class="message">{{ item.message }}</p>
            </div>
          </Dropdown-item>
          <Dropdown-item divided>点击进入消息中心</Dropdown-item>
      </DropdownMenu>
    </Dropdown>
</template>

<script>
export default {
  name: 'msgPush',
  props: {
    placement: {
      type: String,
      default: 'bottom-start'
    },
    data: Array
  },
  methods: {
    enterMessage (name) {
      this.$router.push({
        name: 'message_index'
      })
    }
  }
}
</script>

<style lang="less">
.vm-msg-push{
  ul {
    overflow: hidden;
    li{
      &:first-child{
        color: white;
        font-size: 16px;
        font-weight: bold;
        background: #41b883;
        border-radius: 4px 4px 0 0;
      }
      img{
        vertical-align: top;
        border-radius: 5px;
        margin-right: 5px;
      }
      text-align: left;
      .subject{
        width: 200px;
        display: inline-block;
        .title{
          line-height: 18px;
          font-size: 16px;
          font-weight: bold;
          .time{
            float: right;
            font-size: 14px;
            color: #99a9c0;
          }
        }
        .message{
            margin-top: 6px;
            overflow: hidden;
            text-overflow:ellipsis;
        }
      }
    }
  }
  .vm-badge{
    border: 1px solid #dddee1;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 5px;
    cursor: pointer;
  }
}

.ivu-dropdown-item-divided {
  margin-top:0px;
}

</style>
